<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>信息流管理</el-breadcrumb-item>
      <el-breadcrumb-item>开票信息管理</el-breadcrumb-item>
    </el-breadcrumb>

    <Container class="u-mb15">
      <!-- 筛选 -->
      <el-form
        inline
        class="m-form--filter"
      >
        <el-form-item>
          <el-input 
          class="u-w200"
          size="mini" 
          v-model="filter.invoiceNumber"
          placeholder="请输入发票号"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            class="u-w160"
            size="mini"
            filterable
            placeholder="请选择开票客户信息"
            v-model="filter.customerFullName"
          >
            <el-option
              v-for="item in customerOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
           class="u-w200"
            size="mini"
            filterable
            multiple
            collapse-tags
            placeholder="请选择发票状态"
            v-model="filter.invoiceStatus"
          >
            <el-option
              v-for="item in INVOICESTATEDATA"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input 
          class="u-w200"
          size="mini" 
          v-model="filter.statementIdOrCustomerName"
          placeholder="请输入结算单信息"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            size="mini"
            @click="search"
          >查询</el-button>
        </el-form-item>
      </el-form>
    </Container>

    <Container>
      <!-- 表格操作 -->
      <el-form
        inline
        class="m-table--handle"
      >
        <el-form-item>
          <el-button
            size="mini"
            type="primary"
            @click="$router.push({
              name: 'flow-invoice-detail',
              query: {
                id:null,
                action: 'create'
              }
            })"
          >新增</el-button>
        </el-form-item>
        <el-form-item>
           <el-button
            size="mini"
            @click="handleDelete()"
          >删除</el-button>
        </el-form-item>
        <el-form-item>
          <el-button 
          size="mini" 
          @click="exportExcel('/manage/api/bus/invoice/export',requestSearch)"
          >开票信息导出</el-button>
        </el-form-item>
        <!-- <el-form-item>
           <el-button
            size="mini"
           @click=" exportExcel('/manage/api/bus/invoice/export_bill',requestSearch)"
          >开票结算单导出</el-button> 
        </el-form-item> -->
        
        <CustomTableColumn :columns.sync="tableColumn" />
      </el-form>
      <!-- 表格 -->
      <el-table
        border
        stripe
        :data="tableData"
        @selection-change="changeTableSelection"
      >
        <el-table-column
          type="selection"
          width="35"
          fixed
        >
        </el-table-column>
        <el-table-column
          align="center"
          v-for="(item, index) in filterTableColumn"
          :label="item.label"
          :key="index"
          :width="item.prop == 'statementIds'&& 180"
        >
        <!-- 结算方式 -->
            <!-- <template v-else-if="item.prop === 'settleWay'">{{ mapOptionLabel(SETTLEWAY,scope.row.settleWay) }}</template> -->
          <template slot-scope="scope">
            <!-- 发票状态 -->
            <template v-if="item.prop === 'invoiceStatus'">{{ mapOptionLabel(INVOICESTATEDATA,scope.row.invoiceStatus*1) }}</template>
            
            <template v-else-if="item.prop === 'idAndName'">{{scope.row.idAndName.length == 0 ? '-' : scope.row.idAndName[0].customerFullName}}</template>
            <!-- 其他 -->
            <template v-else>{{scope.row[item.prop]}}</template>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="180"
        >
        <template slot-scope="scope">
           <el-button
              type="text"
              @click="$router.push({
                name: 'flow-invoice-detail',
                query: {
                  action: 'edit',
                  id: scope.row.id,
                  statementIds: scope.row.statementIds
                }
              })"
            >编辑</el-button>
          <el-button
            type="text"
            @click="$router.push({
              name: 'flow-invoice-detail',
              query: {
                action: 'detail',
                id:scope.row.id,
                statementIds: scope.row.statementIds
              }
            })"
          >查看</el-button>
        </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        :page-sizes="[50, 100, 500, 1000]"
        :page-size="page.pageSize"
        layout="total, prev, pager, next, sizes"
        :total="pageTotal"
        @size-change="handlePagerSizeChange"
        @current-change="handlePagerCurrentChange"
      />
    </Container>
  <!-- 导入 -->
  <el-dialog
    title="提示"
    :visible.sync="importVisible"
    width="850">
    <!-- <div>导入成功数据：{{importData.success}}条</div> -->
    <span slot="footer" class="dialog-footer">
      <el-button @click="importVisible = false">取 消</el-button>
      <el-button type="primary" @click="importVisible = false">确 定</el-button>
    </span>
  </el-dialog>
  </div>
</template>

<script>
import Container from "@/components/container";
import CustomTableColumn from "@/components/custom-table-column";

import { SETTLEWAY, INVOICESTATEDATA } from "@/assets/js/flow-option";
import { mapOptionLabel } from "@/util";
import { exportExcel } from '@/utils/fileDown.js'

export default {
  name: "flow-invoice",
  components: {
    Container,
    CustomTableColumn
  },
  data() {
    return {
      SETTLEWAY,
      INVOICESTATEDATA,
      BASE_URL: process.env.VUE_APP_BASE_URL,
      fileList:[],
      // 下拉
      dateValue:Number(this.$route.query.dataValue)|| null,
      customerOptions: [],
      // 筛选
      filter: {
        invoiceNumber: Number(this.$route.query.StateData) || null,
        invoiceStatus: Number(this.$route.query.invoiceStatus) || null,
        statementIdOrCustomerName: Number(this.$route.query.customerId) || null,
        customerFullName: Number(this.$route.query.settleWay) || null
      },
      //导入
      importVisible:false,
      importData:null,

      tableData: [],
      tableSelectionData: [],
      tableColumn: [
        {
          label: "发票号码",
          prop: "invoiceNumber",
          visible: true
        },
        {
          label: "发票状态",
          prop: "invoiceStatus",
          visible: true
        },
        {
          label: "开票客户全称",
          prop: "idAndName",
          visible: true
        },
        {
          label: "结算单信息",
          prop: "statementIds",
          visible: true
        },
        {
          label: "已开票金额（元）",
          prop: "invoiceAmount",
          visible: true
        },
        {
          label: "已回款总金额（元）",
          prop: "sumReturnedMoney",
          visible: true
        },
        {
          label: "未回款金额（元）",
          prop: "notReturnedMoney",
          visible: true
        }
      ],
      page: {
        pageNo: 1,
        pageSize: 50
      },
      pageTotal: 0
    };
  },
  computed: {
    filterTableColumn() {
      return this.tableColumn.filter(item => item.visible);
    },
    requestSearch() {
      return {
        ...this.filter,
        ...this.page,
        invoiceStatus:this.filter.invoiceStatus == null|| this.filter.invoiceStatus.length<0 || this.filter.invoiceStatus == '' ?  null : this.filter.invoiceStatus.join()
      };
    }
  },
  methods: {
    exportExcel,
    // 导出业务清单
    dateChange() {
      this.filter.startDate = this.formatDateTime(this.dateValue[0], "y-m-d");
      this.filter.endDate = this.formatDateTime(this.dateValue[1], "y-m-d");
    },
    mapOptionLabel,

    // 下拉
    fetchCustomerOptions() {
      this.$http({
        method: "get",
        url: "/manage/api/bus/customer/get_customer_full_name",
        params: {
          status: 0
        }
      }).then(res => {
        if (res.data.code === 0) {
          this.customerOptions = [{
            name:'全部客户',
            id:null
          }].concat(res.data.data)
        }
      });
    },
    // 运营人员
    getCurrentOperate(data = []) {
      let len = data.length;
      if (len) {
        let item = data[len - 1];
        return `${item.operatorBy}`;
      }
      return "-";
    },

    // 列表
    search() {
      this.page.pageNo = 1;
      this.getTable();
    },
    //获取列表
    getTable() {
      this.$http({
        method: "post",
        url: "/manage/api/bus/invoice/get_list",
        data: this.requestSearch
      }).then(res => {
        if (res.data.code === 0) {
          let data = res.data.data;
          this.tableData = data.list;
          this.pageTotal = data.listCount;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    // 删除数据
    handleDelete() {
      if (!this.tableSelectionData.length) {
        return this.$message.warning("请选择需要删除的选项！");
      }
      this.removeData(
        this.tableSelectionData.map(item => item.id).join()
        
      );
    },
    removeData(id) {
      this.$confirm("是否删除此账号？删除后不可恢复！", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
           this.$http({
            method: "post",
            url: "/manage/api/bus/invoice/del",
            params: {
              ids: id
            }
          }).then(res => {
            if (res.data.code === 0) {
              this.$message.success("删除成功!");
              this.getTable();
            } else {
              this.$message.error(res.data.msg);
            }
          });
        })
        .catch(() => {});
    },
    //判断选择框是否可选
    handleSelectable(row) {
      return row.invoiceStatus == 1 || 0 ? true :false ;
    },
    changeTableSelection(data) {
      this.tableSelectionData = data;
    },
    handlePagerSizeChange(v) {
      this.page.pageSize = v;
      this.getTable();
    },
    handlePagerCurrentChange(v) {
      this.page.pageNo = v;
      this.getTable();
    }
  },
  activated(){
    this.getTable();
  },
  created() {
    this.fetchCustomerOptions();
  }
};
</script>